  <template>
  <li
    :style="{'backgroundColor': bgColor, 'color':myColor}"
    @mouseenter="handleEnter(true)"
    @mouseleave="handleEnter(false)"
  >
    <input type="checkbox" v-model="isCheck" />
    {{todo.title}}
    <button v-show="isShow" @click="delTodo">删除</button>
  </li>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
  props: {
    todo: {
      type: Object,
      required: true
    },
    deleteTodo: {
      type: Function,
      required: true
    },
    index: {
      type: Number,
      required: true
    },
    updateTodo: {
      type: Function,
      required: true
    }
  },
  setup (props) {
    const bgColor = ref('white')
    const myColor = ref('black')
    const isShow = ref(false)
    const handleEnter = (flag: boolean) => {
      if (flag) {
        isShow.value = true
        bgColor.value = 'pink'
        myColor.value = 'green'
      } else {
        isShow.value = false
        bgColor.value = 'white'
        myColor.value = 'black'
      }
    }
    const delTodo = () => {
      if (window.confirm('确定要删除吗？')) {
        props.deleteTodo(props.index)
      }
    }

    // 计算属性的方式来设置选中和不选中
    const isCheck = computed({
      get () {
        return props.todo.isCheck
      },
      set (val) {
        props.updateTodo(props.todo, val)
      }
    })
    return {
      handleEnter,
      bgColor,
      myColor,
      isShow,
      delTodo,
      isCheck
    }
  }
})
</script>
<style scoped>
li{
  list-style-type:none;
  line-height: 32px;
}
button{
  float: right;
  margin-top: 2px;
  margin-right: 2px;
  width: 60px;
  height: 28px;
  border: none;
  outline: none;
  background: green;
  color: #fff;
}
</style>
